<style lang="less"></style>
<template>
  <Modal v-model="drawer.show" transfer :width="width" :z-index="zIndex" :draggable="true"
    :closable="true" :mask-closable="false" :styles="{ top: '50px' }"
  >
    <span slot="header" :style="titleStyle">{{ lang[drawer.type] }}</span>
    <div slot="footer">
      <Button v-if="drawer.type!=='read'" @click="drawer.show = false">{{ $t(`global.cancel`) }}</Button>
      <Button type="primary" class="ivu-ml" @click="ok"
        >{{ drawer.type!=='read' ? $t(`global.save`) : $t(`global.close`) }}</Button>
    </div>
    <div v-if="drawer.show" :style="bodyStyle">
      <Form ref="_frm" :model="data" :rules="ruleValidate" :disabled="drawer.type === 'read'"
        :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="32">
          <Col v-for="item,index in calcFields" :span="item.span || 12" :key="index">
          <FormItem :prop="item.type" :label="item.title" :rules="item.rules">
            <field-cell :config="item.config" v-model="data[item.key]" />
          </FormItem>
          </Col>
        </Row>
        <Row v-if="hasFeatures" :gutter="32">
          <Col span="24">
          <Alert style="margin: 0">{{ lang.modelProperties }}</Alert>
          <features ref="_features" :modelData="data"></features>
          </Col>
        </Row>
        <component v-if="additionForm" :is='additionForm'
          v-model="data"
        ></component>
      </Form>
    </div>
  </Modal>
</template>

<script>
import features from "public/components/function/wizard/parts/cfg-model-features";

export default {
  name: "cfgLogicModelNewAddModal",
  components: { features },
  data() {
    return {
      collectionObject: null,
      classObject: null,
      modelType: "logic",
      features: [],
      general: {
        status: { type: 'Boolean', defaultValue: false },
        name: { type: 'string', defaultValue: "" },
      },
      propInfo: {},
      values: {}
    }
  },
  props: {
    drawer: {
      default: () => {
        return {
          type: 'edit', // new edit read
          show: false,
        };
      }
    },
    fields: {
      default() {
        return []
      }
    },
    data: {
      default() {
        return {}
      }
    },
    width: {
      default: () => {
        return 1024;
      }
    },
    zIndex: {
      default: () => {
        return 100;
      }
    },
    titleStyle: {
      default: () => {
        return {}
      }
    },
    hasFeatures: {
      default() {
        return false
      }
    },
    additionForm: {
      default() {
        return ''
      }
    },
    bodyStyle: {
      default() {
        return {}
      }
    },
    labelWidth: {
      default() {
        return 120
      }
    },
    labelPosition: {
      default() {
        return 'right'
      }
    },
  },
  computed: {
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          read: 'read',
          action: 'action',
          submit: 'submit',
          type: 'type',
          typePlaceholder: 'Please select type',
          className: 'className',
          classNamePlaceholder: 'Please enter class name',
          version: 'version',
          versionPlaceholder: 'Please enter version',
          published: 'published',
          comments: 'comments',
          commentsPlaceholder: 'Please enter comments',
          modelProperties: 'Model Attribute Configuration',
          typeRuleMsg: 'Please select property type',
          classNameRuleMsg: 'Please enter class name'
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          read: '查看',
          action: '操作',
          submit: '提交',
          type: '所属类型',
          typePlaceholder: '请选择所属类型',
          className: '模型类名',
          classNamePlaceholder: '请输入模型类名',
          version: '版本号',
          versionPlaceholder: '请输入版本号',
          published: '是否发布',
          comments: '说明',
          commentsPlaceholder: '请输入描述信息',
          modelProperties: '模型属性配置',
          typeRuleMsg: '请选择所属类型',
          classNameRuleMsg: '请输入模型类名'
        },
      }[this.G_Locale]
    },
    typeList() {
      return this.$modelObject.getModelType(this.modelType);
    },
    ruleValidate() {
      return {
        // type: [
        //   { required: true, message: this.lang.typeRuleMsg, trigger: 'blur' }
        // ],
        // className: [
        //   { required: true, message: this.lang.classNameRuleMsg, trigger: 'blur' }
        // ],
      }
    },
    calcFields() {
      if (this.drawer.type === 'edit') {
        let res = this.fields.map(item => ({
            ...item,
            config: Object.assign({}, item.config, item.editConfig || {})
        }))
        console.log("🚀 ~ file: cfgModal.vue calcFields", res)
        return res;
      } else {
        return this.fields
      }
    }
  },
  watch: {
    'drawer.show': function () {
      if (this.drawer.show) {
        // this.data=this.$modelObject.getTpl(this.modelType+'Model');
      }
    }
  },
  beforeMount() {
    this.collectionObject = this.$modelObject.create(this.modelType + 'ModelCollection');
    this.classObject = this.$modelObject.create(this.modelType + 'Model')
    // this.data=this.$modelObject.getTpl(this.modelType+'Model');
  },
  mounted() {
    console.log("🚀 ~ file: cfgModal.vue:176 ~ mounted ~ mounted:", this.additionForm)
  },
  methods: {
    /**
     * 提交添加或修改数据
     */
    ok() {
      console.log("🚀 ~ file: cfgModal.vue onOk", this.data)
      this.$refs._frm.validate(valid => {
        if (valid) {
          if (this.hasFeatures) {
            let values = this.$refs._features.getValues();
            let features = this.$refs._features.getFeatures();

            this.$set(this.data, 'values', values);
            this.$set(this.data, 'features', features);
          }
          this.$emit('submit', this.data);
          this.drawer.show = false
        }
      });
    },
  }
}
</script>
